import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Install from "./_install.mdx";
import Tailwind from "./_tailwind.mdx";

# Expo Router

## Installation

### 1. Install NativeWind

<Install />

### 2. Setup Tailwind CSS

<Tailwind />

### 3. Add the Babel preset

<Tabs>
  <TabItem value="SDK 49">
    ```js title="babel.config.js"
    module.exports = function (api) {
      api.cache(true);
      return {
        presets: [
          ["babel-preset-expo", { jsxImportSource: "nativewind" }],
          "nativewind/babel",
        ],
        plugins: [
          // Required for expo-router
          "expo-router/babel",
          "react-native-reanimated/plugin",
        ]
      };
    };
    ```
  </TabItem>
  <TabItem value="SDK 50+">
    ```js title="babel.config.js"
    module.exports = function (api) {
      api.cache(true);
      return {
        presets: [
          ["babel-preset-expo", { jsxImportSource: "nativewind" }],
          "nativewind/babel",
        ],
      };
    };
    ```
  </TabItem>
</Tabs>


### 4. Modify your metro.config.js

If your project does not have a `metro.config.js` run `npx expo customize metro.config.js`

<Tabs>
<TabItem value="SDK 49">

```js title="metro.config.js"
const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname, { isCSSEnabled: true })

module.exports = withNativeWind(config, { input: './global.css' })
```

</TabItem>
<TabItem value="SDK 50+">

```js title="metro.config.js"
const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname)

module.exports = withNativeWind(config, { input: './global.css' })
```

</TabItem>

</Tabs>

### 5. Import your CSS file

```js title="app/_layout.js"
import Slot from "expo-router/Slot";

// Import your global CSS file
import "../global.css"

export default Slot

```

### 6. TypeScript (optional)

Please follow the [TypeScript guide](./typescript).
